<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta content="telephone=no" name="format-detection" />
    <title>Document</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/laydate.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/product.css">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/html5.js"></script>
    <script src="js/placeholder.js"></script>
    <!--[if IE]>
<script>
    (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,main,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
    <!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/html5.css">
<![endif]-->
    <!--[if lt IE 9]>
    <script src="js/css3-mediaqueries.js"></script>
<![endif]-->
    <script>
        var browser = navigator.appName
        var b_version = navigator.appVersion
        var version = b_version.split(";");
        var trim_Version = version[1].replace(/[ ]/g, "");
        if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") { alert("Your browser version is too low, and some features may not be displayed! Please upgrade your browser or use another browser!"); }
        else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") { alert("Your browser version is too low, and some features may not be displayed! Please upgrade your browser or use another browser!"); }
    </script>
</head>

<body>
    <div class="content-box">
        <div class="content-top">
            <div class="fl">
                <a href=""><img src="./images/logo.PNG" /></a>
            </div>
            <img class="menu-btn" src="./images/menu-logo.PNG" />
            <div class="fr">
                <img class="top-home" src="./images/top-home.PNG" />
                <div class="top-news">
                    <img src="./images/top-news.PNG" />
                    <span></span>
                </div>
                <div class="top-account">
                    <img src="./images/top-account.PNG" />
                    <span class="name">UserName</span>
                    <img src="./images/icon_dropdown.png" />
                    <ul>
                        <li><a>修改密码</a></li>
                        <li><a>角色管理</a></li>
                        <li><a>管理员管理</a></li>
                    </ul>
                </div>
                <img class="top-btn" src="./images/top-btn.PNG" />
            </div>
        </div>
        <div class="content-menu">
            <ul class="menu-list">
                <li class="item1 active">
                    <a>首页</a>
                </li>
                <li class="item2">
                    <a>订单</a>
                    <ul class="menu2">
                        <li class="active"><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item3">
                    <a>产品</a>
                </li>
                <li class="item4">
                    <a>会员</a>
                </li>
                <li class="item5">
                    <a>促销</a>
                </li>
                <li class="item6">
                    <a>数据</a>
                </li>
                <li class="item7">
                    <a>博客</a>
                </li>
                <li class="item8">
                    <a>店铺</a>
                </li>
                <li class="item9">
                    <a>设置</a>
                </li>
            </ul>
        </div>
        <div class="content-right">
            <div class="product-box">
                <p class="title1">添加分类</p>
                <div class="basic_info">
                    <p class="title">基本信息</p>
                    <div class="info_item up_sotr">
                        <p class="title">上级分类</p>
                        <select name="" id="">
                            <option value="0">0</option>
                            <option value="1">1</option>
                        </select>
                    </div>
                    <div class="info_item sort_name">
                        <p class="title">分类名称 <span class="xing_hao">*</span></p>
                        <input type="text">
                    </div>
                    <div class="info_item url">
                        <p class="title">URL</p>
                        <input type="text">
                    </div>
                    <div class="info_item filter">
                        <p class="title">筛选</p>
                        <div class="filter_condition">
                            <select name="" id="">
                                <option value="0">筛选项一</option>
                            </select>
                            <span class="add_filter operate_btn"></span>
                        </div>
                        <div class="filter_condition">
                            <select name="" id="">
                                <option value="0">筛选项二</option>
                            </select>
                            <span class="del_filter operate_btn"></span>
                        </div>
                    </div>
                    <div class="info_item img">
                        <p class="title">图片</p>
                        <div class="file_img_box">
                            <input type="file" name="" id="file_pro_img">
                            <div class="file_img">
                                <img src="./img/add_img.png" alt="">
                            </div>
                            <div class="show_img">
                                <img src="" alt="">
                                <div class="operating">
                                    <div class="img_btn_box">
                                        <span class="img_btn btn_bj"></span>
                                        <span class="img_btn btn_del"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <p class="img_tishi">图片大小：800px*800px，不得超过2M</p>
                    </div>
                    <div class="info_item introduct">
                        <p class="title">简介</p>
                        <textarea name="" id="" class="pro_introduct"></textarea>
                    </div>
                    <div class="info_item detail_introduct">
                        <p class="title">详细介绍</p>
                        <textarea name="" id="" class="pro_detail_introduct"></textarea>
                    </div>
                    <div class="btn_box">
                        <a href="javascript:;">提交</a>
                        <a href="javascript:;">返回</a>
                    </div>
                </div>
                <div class="seo_box">
                    <p class="title">SEO</p>
                    <div class="info_item seo_title">
                        <p class="title">SEO标题</p>
                        <input type="text">
                    </div>
                    <div class="info_item seo_keyword">
                        <p class="title">SEO关键字</p>
                        <input type="text">
                    </div>
                    <div class="info_item seo_description">
                        <p class="title">SEO描述</p>
                        <textarea name="" id="" class="seo_des_text"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/echarts.min.js"></script>
    <script src="js/laydate.js"></script>
    <script src="js/common.js"></script>

    <script>
        // 提交图片
        $(".file_img").on("click",function(){
            $("#file_pro_img").click();
        });
        $("#file_pro_img").change(function(){  
            var objUrl = getObjectURL(this.files[0]);    
            if (objUrl) {  
                $(".show_img>img").attr("src", objUrl);
                $(".show_img").show();
            }else{
                $(".show_img").hide();
            }
        }) ; 
        //建立一個可存取到该file的url  
        function getObjectURL(file) {  
            var url = null ;   
            if (window.createObjectURL!=undefined) { // basic  
                url = window.createObjectURL(file) ;  
            } else if (window.URL!=undefined) { // mozilla(firefox)  
                url = window.URL.createObjectURL(file) ;  
            } else if (window.webkitURL!=undefined) { // webkit or chrome  
                url = window.webkitURL.createObjectURL(file) ;  
            }  
            return url ;  
        } ;
        $(".show_img").on("mouseover",function(){
            $(this).find(".operating").css("top","0");
        });
        $(".show_img").on("mouseout",function(){
            $(this).find(".operating").css("top","120px");
        });
    </script>
</body>

</html>